//less辅助函数
@import (once) "vars";

//清除浮動
.clearfix {
  *zoom:1;

  &:before,
  &:after {
    display: table;
    font-size: 0;
    content: " ";
    clear: both;
  }
}
.text-left{
  text-align: left !important;
}
.float-end{
  float:right;
}

.float-start{
  float:left;
}

#utility {
  /////////////////////////////////////////////////////////////////////////////////////////
  // 動畫、變換
  /////////////////////////////////////////////////////////////////////////////////////////
  //單一屬性值
  .animation(@property,@value){
    -webkit-animation-@{property}:@value;
    -moz-animation-@{property}:@value;
    -o-animation-@{property}:@value;
    animation-@{property}:@value;
  }
  //縮寫
  .animation(@value){
    -webkit-animation:@value;
    -moz-animation:@value;
    -o-animation:@value;
    animation:@value;
  }
  //單一屬性值
  .transition(@property,@value){
    -webkit-transition-@{property}:@value;
    -moz-transition-@{property}:@value;
    -o-transition-@{property}:@value;
    transition-@{property}:@value;
  }
  //縮寫
  .transition(@value){
    -webkit-transition:@value;
    -moz-transition:@value;
    -o-transition:@value;
    transition:@value;
  }
  //單一屬性值
  .transform(@property,@value){
    -webkit-transform-@{property}:@value;
    -moz-transform-@{property}:@value;
    -o-transform-@{property}:@value;
    transform-@{property}:@value;
  }
  //縮寫
  .transform(@value){
    -webkit-transform:@value;
    -moz-transform:@value;
    -o-transform:@value;
    transform:@value;
  }
  /////////////////////////////////////////////////////////////////////////////////////////
  // 動畫、變換 end
  /////////////////////////////////////////////////////////////////////////////////////////

  .box-shadow(@value){
    -webkit-box-shadow:@value;
    -moz-box-shadow:@value;
    -o-box-shadow:@value;
    box-shadow:@value;
  }
  .opacity(@value){
    @alpha:@value * 100;
    opacity: @value;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity= @alpha);
    filter: alpha(opacity= @alpha);
  }
  /////////////////////////////////////////////////////////////////////////////////////////
  // 佈局及盒模型
  /////////////////////////////////////////////////////////////////////////////////////////
  //將盒模型設置成border-box
  .border-box(){
    box-sizing:border-box;
  }

  //將盒模型設置成content-box
  .content-box(){
    box-sizing:content-box;
  }

  //觸發bfc
  .bfc() {
    overflow:hidden;
  }

  //左、右負間距
  //用來抵消父容器padding
  .x-bound(@dir:both,@space:@base-space){
    & when (@dir = left){
      .rem(margin-left,-@space);
    }
    & when (@dir = start){
      .rem(margin-left,-@space);
    }
    & when (@dir = right){
      .rem(margin-right,-@space);
    }
    & when (@dir = end){
      .rem(margin-right,-@space);
    }
    & when (@dir = both){
      .rem(margin-left,-@space);
      .rem(margin-right,-@space);
    }
  }

  //將px轉成rem
  .rem(@prop: font-size,@values: @base-font-size,@base:@base-html-font-size) {
    //IE9以下浏览器不支持rem，兼容
    @{prop}:@values;

    @length: length(@values);
    .loop(@i:1,@n:@length) when (@i <= (@length)){
      @value:extract(@values,@i);
      //将数组项转为rem，并輸出到@rem
      .convert-to-rem(@value) when (ispixel(@value)){
        @rem:unit(@value/@base,rem);
      }
      .convert-to-rem(@value) when(default()){
        @rem:@value;
      }
      .convert-to-rem(@value);

      @{prop}+_:@rem;
      .loop(@i+1,@length);
    }
    .loop();

    ////IE9以下浏览器不支持rem，兼容
    //.ielt9 &{
    //  @{prop}:@values;
    //}
  }
  //快捷設置
  .border(@values: @base-font-size,@base:@base-html-font-size){
    .rem(border,@values,@base);
  }
  .border-width(@values: @base-font-size,@base:@base-html-font-size){
    .rem(border-width,@values,@base);
  }
  .margin(@values: @base-font-size,@base:@base-html-font-size){
    .rem(margin,@values,@base);
  }
  .margin-top(@values: @base-font-size,@base:@base-html-font-size){
    .rem(margin-top,@values,@base);
  }
  .margin-right(@values: @base-font-size,@base:@base-html-font-size){
    .rem(margin-right,@values,@base);
  }
  .margin-bottom(@values: @base-font-size,@base:@base-html-font-size){
    .rem(margin-bottom,@values,@base);
  }
  .margin-left(@values: @base-font-size,@base:@base-html-font-size){
    .rem(margin-left,@values,@base);
  }
  .padding(@values: @base-font-size,@base:@base-html-font-size){
    .rem(padding,@values,@base);
  }
  .padding-top(@values: @base-font-size,@base:@base-html-font-size){
    .rem(padding-top,@values,@base);
  }
  .padding-right(@values: @base-font-size,@base:@base-html-font-size){
    .rem(padding-right,@values,@base);
  }
  .padding-bottom(@values: @base-font-size,@base:@base-html-font-size){
    .rem(padding-bottom,@values,@base);
  }
  .padding-left(@values: @base-font-size,@base:@base-html-font-size){
    .rem(padding-left,@values,@base);
  }
  .width(@values: @base-font-size,@base:@base-html-font-size){
    .rem(width,@values,@base);
  }
  .height(@values: @base-font-size,@base:@base-html-font-size){
    .rem(height,@values,@base);
  }
  .line-height(@values: @base-font-size,@base:@base-html-font-size){
    .rem(line-height,@values,@base);
  }
  .font-size(@values: @base-font-size,@base:@base-html-font-size){
    .rem(font-size,@values,@base);
  }
  .min-width(@values: @base-font-size,@base:@base-html-font-size){
    .rem(min-width,@values,@base);
  }
  .max-width(@values: @base-font-size,@base:@base-html-font-size){
    .rem(max-width,@values,@base);
  }
  .min-height(@values: @base-font-size,@base:@base-html-font-size){
    .rem(min-height,@values,@base);
  }
  .max-height(@values: @base-font-size,@base:@base-html-font-size){
    .rem(max-height,@values,@base);
  }

  //before after偽類內容設置
  .content-set(@content:"", @display:block){
    content:@content;
    display:@display;
  }

  //正方形
  .square-box(@size:16px){
    .rem(width,@size);
    .rem(height,@size);
  }

  //display:table
  .display-table(){
    display:table;
    width:100%;
    #utility .border-box;
  }

  .display-table-cell(@valign:middle){
    float:none;
    display:table-cell;
    vertical-align:@valign;
  }

  .display-inline-block(@valign:middle){
    display:inline-block;
    *display: inline;
    vertical-align:@valign;
    *zoom:1;
  }
  //inline-block父元素，修復元素間間隙
  .inline-block-context(){
    font-size: 0;
    line-height: 0;
  }

  //inline-block元素
  .inline-block-element(@font-size: @base-font-size,@line-height: @base-line-height,@valign: middle){
    .display-inline-block(@valign);
    .rem(font-size,@font-size);
    .rem(line-height,@line-height);
  }
  //圓角
  .radius(@radius:@base-radius) {
    border-radius: @radius;
  }
  //行高與高度一致
  .same-height(@height){
    .rem(height,@height);
    .rem(line-height,@height);
  }

  //彈性盒佈局
  .display-flex(){
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-box;
    display: -moz-box;
  }
  //垂直方向
  .y-flex(@flex-align:center){
    #utility .display-flex;
    -webkit-box-orient:vertical;
    -moz-box-orient:vertical;
    -o-box-orient:vertical;
    flex-direction:column;
    .flex-align(@flex-align);
  }
  //水平方向
  .x-flex(@flex-align:center){
    .display-flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -o-box-orient: horizontal;
    flex-direction: row;
    .flex-align(@flex-align);
  }

  //側軸對齊方向，row排版的，垂直方向對齊
  .flex-align(@flex-align:center){
    //居中
    & when (@flex-align = center){
      justify-content:center;
      -webkit-box-pack:center;
      -moz-box-pack:center;
      -o-box-pack:center;
    }
    //頂端
    & when (@flex-align = start){
      justify-content:flex-start;
      -webkit-box-pack:start;
      -moz-box-pack:start;
      -o-box-pack:start;
    }
    //底部
    & when (@flex-align = end){
      justify-content:flex-end;
      -webkit-box-pack:end;
      -moz-box-pack:end;
      -o-box-pack:end;
    }
  }

  //彈性係數
  .flex(@flex: 1) {
    -webkit-box-flex: @flex;
    -moz-box-flex: @flex;
    -webkit-flex: @flex;
    -ms-flex: @flex;
    flex: @flex;
  }

  //设置定位位置
  .position-set(@set){
    @top:extract(@set,1);
    @right:extract(@set,2);
    @bottom:extract(@set,3);
    @left:extract(@set,4);
    & when (isnumber(@top)), (@top = "auto"){
      .rem(top,@top);
    }
    & when (isnumber(@right)), (@right = "auto"){
      .rem(right,@right);
    }
    & when (isnumber(@bottom)), (@bottom = "auto"){
      .rem(bottom,@bottom);
    }
    & when (isnumber(@left)), (@left = "auto"){
      .rem(left,@left);
    }
  }

  //設置為絕對定位 并設置位置
  .layout-absolute(@set:auto auto auto auto) {
    #utility .position-set(@set);
  }
  .layout-absolute(top-left) {
    #utility .position-set(0 auto auto 0);
  }
  .layout-absolute(top-center,@transform:true) {
    #utility .position-set(0 auto auto 50%);
    & when (@transform = true){
      .transform(translateX(-50%));
    }
  }
  .layout-absolute(top-right) {
    #utility .position-set(0 0 auto auto);
  }
  .layout-absolute(right-center,@transform:true) {
    #utility .position-set(50% 0 auto auto);
    & when (@transform = true){
      .transform(translateY(-50%));
    }
  }
  .layout-absolute(left-center,@transform:true) {
    #utility .position-set(50% auto auto 0);
    & when (@transform = true){
      .transform(translateY(-50%));
    }
  }
  .layout-absolute(bottom-right) {
    #utility .position-set(auto 0 0 auto);
  }
  .layout-absolute(bottom-center,@transform:true) {
    #utility .position-set(auto auto 0 50%);
    & when (@transform = true){
      .transform(translateX(-50%));
    }
  }
  .layout-absolute(@set:"",@transform:""){
    position:absolute;
  }

  //設置為固定定位 并設置位置
  .layout-fixed(@set:auto auto auto auto) {
    #utility .position-set(@set);
  }
  .layout-fixed(top-left) {
    #utility .position-set(0 auto auto 0);
  }
  .layout-fixed(top-center,@transform:true) {
    #utility .position-set(0 auto auto 50%);
    & when (@transform = true){
      .transform(translateX(-50%));
    }
  }
  .layout-fixed(top-right) {
    #utility .position-set(0 0 auto auto);
  }
  .layout-fixed(right-center,@transform:true) {
    #utility .position-set(50% 0 auto auto);
    & when (@transform = true){
      .transform(translateY(-50%));
    }
  }
  .layout-fixed(left-center,@transform:true) {
    #utility .position-set(50% auto auto 0);
    & when (@transform = true){
      .transform(translateY(-50%));
    }
  }
  .layout-fixed(bottom-right) {
    #utility .position-set(auto 0 0 auto);
  }
  .layout-fixed(bottom-center,@transform:true) {
    #utility .position-set(auto auto 0 50%);
    & when (@transform = true){
      .transform(translateX(-50%));
    }
  }
  .layout-fixed(@set:"",@transform:""){
    position:fixed;
  }

  //設置為相对定位 并設置位置
  .layout-relative(@set:auto auto auto auto) {
    #utility .position-set(@set);
  }
  .layout-relative(top-left) {
    #utility .position-set(0 auto auto 0);
  }
  .layout-relative(top-center,@transform:true) {
    #utility .position-set(0 auto auto 50%);
    & when (@transform = true){
      .transform(translateX(-50%));
    }
  }
  .layout-relative(top-right) {
    #utility .position-set(0 0 auto auto);
  }
  .layout-relative(right-center,@transform:true) {
    #utility .position-set(50% 0 auto auto);
    & when (@transform = true){
      .transform(translateY(-50%));
    }
  }
  .layout-relative(left-center,@transform:true) {
    #utility .position-set(50% auto auto 0);
    & when (@transform = true){
      .transform(translateY(-50%));
    }
  }
  .layout-relative(bottom-right) {
    #utility .position-set(auto 0 0 auto);
  }
  .layout-relative(bottom-center,@transform:true) {
    #utility .position-set(auto auto 0 50%);
    & when (@transform = true){
      .transform(translateX(-50%));
    }
  }
  .layout-relative(@set:"",@transform:""){
    position:relative;
  }

  //內容超出隱藏
  .content-clip() {
    overflow:hidden;
  }
  .content-unclip() {
    overflow:initial;
  }

  //文字截取
  //單行截取
  .single-line-text(){
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  //多行截取
  .multi-line-text(@line-height:@base-line-height,@lines:2,@y-align:center){
    .y-flex(@y-align);
    .rem(max-height,@line-height * @lines);
    -webkit-line-clamp: @lines;
    .rem(line-height,@line-height);
    white-space:normal;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /////////////////////////////////////////////////////////////////////////////////////////
  // 分隔線
  /////////////////////////////////////////////////////////////////////////////////////////
  //添加分隔線
  .y-driver(@type:between, @color:@base-border-color, @width:1px, @style:solid){
    //中間
    & when (@type = between){
      &:not(:first-child){
        border-top:@width @style @color;
      }
    }
    //環繞
    & when (@type = around){
      border-top:@width @style @color;
      border-bottom:@width @style @color;
    }
    //有首無尾
    & when (@type = start){
      border-top:@width @style @color;
    }
    //有尾無首
    & when (@type = end){
      border-bottom:@width @style @color;
    }
  }
  //清除分隔線
  .y-driver-clear(@type:between){
    //中間
    & when (@type = between){
      &:not(:first-child){
        border-top:none;
      }
    }
    //環繞
    & when (@type = around){
      border-top:none;
      border-bottom:none;
    }
    //有首無尾
    & when (@type = start){
      border-top:none;
    }
    //有尾無首
    & when (@type = end){
      border-bottom:none;
    }
  }

  //水平分隔線
  .x-driver(@type:between, @color:@base-border-color, @width:1px, @style:solid){
    //中間
    & when (@type = between){
      &:not(:first-child){
        border-left:@width @style @color;
      }
    }
    //環繞
    & when (@type = around){
      border-left:@width @style @color;
      border-right:@width @style @color;
    }
    //有首無尾
    & when (@type = start){
      border-left:@width @style @color;
    }
    //有尾無首
    & when (@type = end){
      border-right:@width @style @color;
    }
  }
  //清除分隔線
  .x-driver-clear(@type:between){
    //中間
    & when (@type = between){
      &:not(:first-child){
        border-left:none;
      }
    }
    //環繞
    & when (@type = around){
      border-left:none;
      border-right:none;
    }
    //有首無尾
    & when (@type = start){
      border-left:none;
    }
    //有尾無首
    & when (@type = end){
      border-right:none;
    }
  }

  /////////////////////////////////////////////////////////////////////////////////////////
  // 分隔線 end
  /////////////////////////////////////////////////////////////////////////////////////////
}